<template>
  <!-- 项目实施 - 7成本控制 - tab1在建项目 -->
  <div class="cost-control-doing">
    <el-row :gutter="20">
      <el-col :span="8" v-for="(i, idx) in cardListData" :key="idx" class="card-group">
        <card-list :cardData="i" :idx="idx" @cardClick="showModal('card1')"></card-list>
      </el-col>
      <el-col :span="24">
        <el-form class="search" :inline="true" :model="formData" label-position="right" label-width="90px">
          <el-row :gutter="12">
            <el-col :span="16" v-if="showSearch == false">
              <advancedFilter></advancedFilter>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="项目名称">
                <el-input v-model="formData.ipt1" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="费用类型">
                <el-input v-model="formData.ipt2" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="状态">
                <el-select v-model="formData.sel" multiple clearable placeholder="请选择..." style="width: 100%;">
                  <el-option label="启用" value="shanghai"></el-option>
                  <el-option label="停用" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="showSearch ? 6 : 8" style="text-align: right;">
              <el-button type="primary">筛选</el-button>
              <el-button @click="resetForm">重置</el-button>
              <el-button type="text" @click="changeSearch"> {{showSearch===true ? '高级筛选' : '普通筛选'}} </el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="24">
        <el-row :gutter="12" style="display: inline-flex;width: 100%;">
          <el-col :span="4" :md="5" class="border-r">
            <el-input v-model="treeSearch" class="tree-search" placeholder="搜索关键字" suffix-icon="el-icon-search"></el-input>
            <el-tree class="cust-tree" node-key="id" :data="treeData" ref="tree" :props="defaultProps" @node-click="handleNodeClick" default-expand-all></el-tree>
          </el-col>
          <el-col :span="20" :md="19">
            <div class="table-top-btns">
              <el-button type="primary" plain @click="showModal('xmysModal')"> 项目预算 </el-button>
              <el-button type="primary" plain @click="showModal('edit')"> 成本登记 </el-button>
              <el-button type="primary" plain @click="$message.warning('当前应用绑定未指定新建权限，请联系应用设计师！')"> 导入 </el-button>
            </div>
            <cust-act-table
              ref="custActTable1"
              tableType="costControlDoing"
              :list="tableData"
              :colConfigs="customColumns"
              @changePage="changePage"
              @getDetail="getDetail"
              @getSelectedRow="showModal('table')"
              :pageNum="page.pageNum"
              :pageSize="page.pageSize"
              :total="page.total"
              :showIdx="false"
              :showAct="true"
              rKey="index"
            ></cust-act-table>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 点击卡片弹窗 -->
    <el-dialog :title="cardTitle1" class="card-modal" :visible.sync="cardModalState1" @close="closeModal('card1')" width="1200px" style="margin-top:6vh;" :close-on-click-modal="false">
      <div class="plan-change-btns">
        <el-dropdown trigger="click" style="margin-right:10px;">
          <el-button type="primary" plain>
            全部数据<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>全部数据</el-dropdown-item>
            <el-dropdown-item>
              <span @click="shortcutFilter(true)">
                <i class="el-icon-plus" style="color: #11A983;"></i>添加快捷筛选
              </span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button @click="shortcutFilter(true)" icon="el-icon-files" type="primary" plain> 筛选 </el-button>
        <el-button @click="$message.info('转发')" type="primary" plain> 转发 </el-button>
        <el-button @click="$message.info('导出')" type="primary" plain> 导出 </el-button>
        <el-button @click="$message.info('打印')" type="primary" plain> 打印 </el-button>
        <el-button @click="$message.info('致信交流')" type="primary" plain> 致信交流 </el-button>
        <i class="el-icon-question" @click="helpState = true" title="帮助"></i>
      </div>
      <cust-act-table
        ref="custCardTable"
        tableType=""
        tableHeight="500px"
        resourceName="cost-control-doing"
        :list="cardData"
        :colConfigs="cardCol"
        @changePage="changeCardTablePage"
        @boxClick="boxClick"
        :pageNum="cardTablePage.pageNum"
        :pageSize="cardTablePage.pageSize"
        :total="cardTablePage.total"
        :showIdx="false"
        :showAct="false"
        rKey="index"
      ></cust-act-table>
    </el-dialog>
    <!-- 点击卡片二级弹窗 -->
    <el-dialog :title="cardTitle2" class="card-modal" :visible.sync="cardModalState2" @close="closeModal('card2')" width="1200px" :close-on-click-modal="false">
      <cust-act-table
        ref="custCardDetailTable"
        tableType=""
        :list="cardData2"
        :colConfigs="cardCol2"
        @changePage="changeCustCardDetailTablePage"
        @getSelectedRow="showModal('card3')"
        :pageNum="custCardDetailPage.pageNum"
        :pageSize="custCardDetailPage.pageSize"
        :total="custCardDetailPage.total"
        :showIdx="false"
        :showAct="false"
        rKey="index"
      ></cust-act-table>
    </el-dialog>
    <!-- 添加快捷筛选 -->
    <el-dialog class="shortcut-modal" :visible.sync="shortcutState" @close="shortcutFilter(false)" :width="shortType==0? '800px': '1000px'" show-close :close-on-click-modal="false">
      <div slot="title" class="shortcut-modal-title">
        <span>设置筛选条件</span>
        <div>
          <el-button type="text"> 重置 </el-button>
          <el-button type="text"> 清空 </el-button>
        </div>
      </div>
      <div class="shortcut-modal-body">
        <div class="select-type">
          <span>筛选模式</span>
          <el-radio-group v-model="shortType">
            <el-radio :label="0">普通筛选</el-radio>
            <el-radio :label="1">高级筛选</el-radio>
          </el-radio-group>
        </div>
        <el-form v-if="shortType == 0" :inline="true" :model="shortForm"  class="demo-form-inline">
          <el-form-item v-for="(i, idx) in shortForm.item1" :key="'item1.' + idx" :label="i.title" :prop="'item1.' + idx + '.value'">
            <el-select v-model="i.sel1" multiple clearable placeholder="请选择..." style="width: 220px">
            </el-select>
            <el-select v-model="i.sel2" multiple clearable placeholder="请选择..." style="width: 120px;margin-left:10px;">
            </el-select>
            <el-input v-model="i.ipt1" clearable placeholder="请输入" style="width: 250px;margin-left:10px;"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button v-if="index1 != 0" icon="el-icon-minus" plain class="cust-btn" @click="handleRemove"></el-button>
            <el-button icon="el-icon-plus" plain class="cust-btn" @click="handleAdd"></el-button>
          </el-form-item>
        </el-form>
        <el-form v-if="shortType == 1" :inline="true" :model="shortForm"  class="demo-form-inline">
          <el-form-item v-for="(i, idx) in shortForm.item2" :key="'item2.' + idx" :label="i.title" :prop="'item2.' + idx + '.value'">
            <el-select v-model="i.sel1" multiple clearable placeholder="请选择..." style="width: 100px">
            </el-select>
            <el-select v-model="i.sel2" multiple clearable placeholder="请选择..." style="width: 180px;margin-left:10px;">
            </el-select>
            <el-select v-model="i.sel3" multiple clearable placeholder="请选择..." style="width: 120px;margin-left:10px;">
            </el-select>
            <el-input v-model="i.ipt1" disabled style="width: 180px;margin-left:10px;"></el-input>
            <el-select v-model="i.sel4" multiple clearable placeholder="请选择..." style="width: 100px;margin-left:10px;">
            </el-select>
            <el-select v-model="i.sel5" multiple clearable placeholder="请选择..." style="width: 100px;margin-left:10px;">
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-button v-if="index2 != 0" icon="el-icon-minus" plain class="cust-btn" @click="handleRemove"></el-button>
            <el-button icon="el-icon-plus" plain class="cust-btn" @click="handleAdd"></el-button>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="shortcut-modal-footer">
        <div>
          <el-button type="text" @click="saveShortcut"> 另存为 </el-button>
          <el-button type="text" @click="saveShortcut"> 保存 </el-button>
        </div>
        <div>
          <el-button type="primary" plain @click="shortcutFilter(false)"> 取消 </el-button>
          <el-button type="primary" @click="shortcutFilter(false)"> 筛选 </el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 帮助弹窗 -->
    <el-dialog title="帮助" class="help-modal" :visible.sync="helpState" @close="helpState=false" width="600px" show-close :close-on-click-modal="false">
      <div>
        <h4>【快捷筛选】</h4>
        <ul>
          <li v-for="(i, idx) in helpText" :key="idx">
            <h4>{{ i.title }}</h4>
            <h5>{{ i.subTitle }}</h5>
            <p>{{ i.text }}</p>
          </li>
        </ul>
      </div>
      <span slot="footer" class="help-modal-footer">
        <el-button type="primary" @click="helpState=false"> 关闭 </el-button>
      </span>
    </el-dialog>
    <!-- 项目预算 -->
    <el-dialog title="项目预算" class="btn-modal" :visible.sync="xmysModal" @close="closeModal('xmysModal')" width="1200px" style="margin-top:6vh;" :close-on-click-modal="false">
      <detailModal :tabList="xmysDetailModalInfo.tabList" :modalImgs="xmysDetailModalInfo.imgs" :formDetailTitle="xmysDetailModalInfo.formDetailTitle" :formDetail="xmysDetailModalInfo.formList"  :formData="xmysDetailModalInfo.doc" :rTabData="xmysDetailModalInfo.rTabData" menuType="项目预算"></detailModal>
    </el-dialog>
    <!-- 支出申请 -->
    <el-dialog title="费用支出" class="btn-modal" :visible.sync="fyzcModal" @close="closeModal('fyzcModal')" width="1200px" style="margin-top:6vh;" :close-on-click-modal="false">
      <detailModal :tabList="fyzcDetailModalInfo.tabList" :modalImgs="fyzcDetailModalInfo.imgs" :formDetailTitle="fyzcDetailModalInfo.formDetailTitle" :formDetail="fyzcDetailModalInfo.formList" :formData="fyzcDetailModalInfo.doc" :rTabData="fyzcDetailModalInfo.rTabData" menuType="费用支出"></detailModal>
    </el-dialog>
    <!-- 预算调整 -->
    <el-dialog title="预算调整" class="btn-modal" :visible.sync="ystzModal" @close="closeModal('ystzModal')" width="1200px" style="margin-top:6vh;" :close-on-click-modal="false">
      <detailModal :tabList="ystzDetailModalInfo.tabList" :modalImgs="ystzDetailModalInfo.imgs" :formDetailTitle="ystzDetailModalInfo.formDetailTitle" :formDetail="ystzDetailModalInfo.formList" :formData="ystzDetailModalInfo.doc" :rTabData="ystzDetailModalInfo.rTabData" menuType="预算调整"></detailModal>
    </el-dialog>
    <!-- 点击列表弹窗 -->
    <el-dialog class="table-modal" :title="modalType == 'card3' ? '穿透显示详情' : modalType == 'edit' ? '修改' : '查看'" :visible.sync="tableModalState" @close="closeModal('table')" width="940px" :close-on-click-modal="false">
      <modalBtns :modalType="modalType == 'card3' ? 'table' : modalType" @close="closeModal('table')"></modalBtns>
      <formName text="项目成本"></formName>
      <div class="form-content">
        <formPart listTitle="基本信息" @clickModalBtn="showNextLevelModal" ref="info1" :modalTitle="modalType == 'table' ? 'modalDetail' : 'EDIT-FORM'" :formList="formInfo.info1"></formPart>
        <formPart listTitle="支出明细" @clickModalBtn="showNextLevelModal" ref="info2" modalTitle="EDIT-TABLE" :formList="formInfo.info2"></formPart>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { tableData7, customColumns7, customColumns7_2, menu7_cardTableData, menu7_cardTableCol, helpText, menu7_custCardDetailTableData, menu7_custCardDetailTableCol } from '../../js/staticData';
import cardList from '../../components/cardList';
import advancedFilter from '../../components/advancedFilter';
import modalBtns from '../../components/modalBtns';
import formName from '../../components/formName';
import formPart from '../../components/formPart';
import detailModal from '../../components/detailModal';
import custActTable from "../../components/custActTable.vue";
export default {
  name: "costControlDoing",
  components: {cardList, custActTable, advancedFilter, detailModal, modalBtns, formName, formPart},
  data() {
    return {
      cardListData: [
        {
          img3: require('../../images/card-icon6.png'),
          line3: '68万',
          line4: '预算总额'
        },
        {
          img3: require('../../images/card-icon9.png'),
          line3: '7.80万',
          line4: '使用金额'
        },
        {
          img3: require('../../images/card-icon3.png'),
          line3: '60.20万',
          line4: '剩余金额'
        }
      ],
      cardTitle1: `在建项目成本投入-负责项目`,
      cardTitle2: '',
      cardData: menu7_cardTableData,
      cardCol: menu7_cardTableCol,
      cardData2: menu7_custCardDetailTableData,
      cardCol2: menu7_custCardDetailTableCol,
      helpText: helpText,
      treeData: [
        {
          label: '状态',
          children: [
            { label: '启用', id: 0},
            { label: '停用', id: 1}
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      contentIdx: 0,
      cardModalState1: false, // 点击卡片弹窗
      cardModalState2: false, // 点击卡片内部列表行弹窗
      helpState: false,
      shortcutState: false,
      shortType: 0,
      shortForm: {
        item1: [
          {
            sel1: '',
            sel2: '',
            ipt1: '',
          }
        ],
        item2: [
          {
            sel1: '',
            sel2: '',
            sel3: '',
            sel4: '',
            sel5: '',
            ipt1: '',
          }
        ]
      },
      index1: 0,
      index2: 0,
      formData: {
        ipt1: '',
        ipt2: '',
        sel: [],
      },
      treeSearch: '',
      showSearch: true,
      edit: false,
      xmysModal: false,
      fyzcModal: false,
      ystzModal: false,
      tableModalState: false,
      customColumns: customColumns7,
      customCol2: customColumns7_2,
      tableData: tableData7[0],
      formInfo: {
        info1: [
          { l: '项目名称', v: '蓝旗机器人造林', type: 'inputIconR', icon: { path:require('../../images/modal-icon1.png'), width: '14px', height: '16px'}, span: 12 },
          { l: '费用类型', v: '商务费用', type: 'inputIconR', icon: { path:require('../../images/modal-icon1.png'), width: '14px', height: '16px'}, span: 6 },
          { l: '状态', v: '启用', span: 6 },
          { l: '费用说明', v: '', span: 24 },
          { l: '预算金额', v: '60,000.00', type: 'unitInput', unit: '元', span: 6 },
          { l: '支出总额', v: '20,020.00', type: 'unitInput', unit: '元', span: 6 },
          { l: '在途金额', v: '0.00', type: 'inputBtnR', openModal: 'nextLevel', span: 6 },
          { l: '可用余额', v: '39,980.00', type: 'unitInput', unit: '元', span: 6 }
        ],
        info2: [
          {
            btns: ['新建', '复制', '删除', '删除全部', '导入数据'],
            tableCol: [
              { label: '支出日期', prop: 'zcrq', slot: 'jump', openModal: 'fyzcModal', width: 150 },
              { label: '支出金额', prop: 'zcje' },
              { label: '支出事由', prop: 'zcsy' }
            ],
            tableData: [
              {
                zcrq: '2024-07-03',
                zcje: '10,000.00',
                zcsy: '商务招待费用',
              },
              {
                zcrq: '2024-07-30',
                zcje: '20,000.00',
                zcsy: '员工月度工资支出',
              }
            ],
            page: {
              pageNum: 1, // 当前页
              pageSize: 10, // 每页条数
              total: 0 // 总条数
            }
          }
        ]
      },
      page: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      cardTablePage: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      custCardDetailPage: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      modalType: '',
      cardIdx: 0,
      xmysDetailModalInfo: {
        formDetailTitle: '项目预算',
        formList: [
          {
            title: '',
            modalTitle: 'EDIT-FORM',
            list: [
              { l: '经办人', v: '朱冠', span: 6 },
              { l: '经办日期', v: '2024-07-30', type: 'datePicker', span: 6 },
              { l: '经办部门', v: 'XX部门', span: 6 },
              { l: '№', v: '', span: 6 },
              { l: '经办单位', v: '', span: 24 }
            ]
          },
          {
            title: '基本信息',
            modalTitle: 'EDIT-FORM',
            list: [
              { l: '项目名称', v: '', type: 'inputIconR', icon: { path:require('../../images/modal-icon1.png'), width: '14px', height: '16px'}, span: 12 },
              { l: '负责人', v: '', span: 6 },
              { l: '预算总额', v: '0.00', type: 'unitInput', unit: '元', span: 6 },
              { l: '备注', v: '', type: 'input', span: 12 },
              { l: '相关附件', v: '', span: 12, type: 'inputIconR', span: 12, icon: { path:require('../../images/modal-icon2.png'), width: '14px', height: '16px'} }
            ]
          },
          {
            title: '预算信息',
            modalTitle: 'EDIT-TABLE',
            list: [
              {
                btns: ['新建', '选择费用类型', '删除', '删除全部', '导入数据'],
                tableCol: [
                  { label: '费用类型', prop: 'fylx', slot: 'inputIconR', type: 'inputIconR', icon: { path:require('../../images/modal-icon3.png'), width: '16px', height: '16px'} },
                  { label: '预算金额（元）', prop: 'ysje', width: 120 },
                  { label: '费用说明', prop: 'fysm' }
                ],
                tableData: [
                  {
                    fylx: '',
                    ysje: '',
                    fysm: ''
                  }
                ],
                page: {
                  pageNum: 1, // 当前页
                  pageSize: 10, // 每页条数
                  total: 0 // 总条数
                }
              }
            ]
          }
        ],
        tabList: [
          {
            label: "智能校验",
            value: "1",
            img: require('../../images/icon-tab-rt-2.png'),
            active: require('../../images/icon-tab-rt-active-2.png')
          }, {
            label: "流程预测",
            value: "4",
            img: require('../../images/icon-tab-rt-4.png'),
            active: require('../../images/icon-tab-rt-active-4.png')
          }, {
            label: "相关数据",
            value: "5",
            img: require('../../images/icon-tab-rt-5.png'),
            active: require('../../images/icon-tab-rt-active-5.png')
          }
        ],
        imgs: {
          contentImgTitle: "项目预算",
          img1: require('../../images/xmys-form-modal-bg2.png'), // 查看流程
          img2: require('../../images/xmys-form-modal-bg2-2.png'), // 查看流程泳道框图
          img3: [{
            num1: '0',
            num2: '3分',
            dateTime: '2024-08-08 09:17:05',
            status: 'finished',
            list: [{
              name: '凌焘',
              role: '审批',
              opinion: '同意',
              handler: '凌焘',
              handleTime: '2024-08-09 15:46:20',
              investTime: '3分'
            }]
          }], // 流程预测
        },
        doc: {
          name: `项目预算-{项目名称}-{经办日期}`,
          flow: `凌焘(审批)`
        },
        rTabData: [
          {
            label: '智能校验',
            info: [ // state: 1.不通过 2.警示 3.通过
              {l: '项目名称字段为空', state: 1, v: '不通过'},
              {l: '费用类型字段为空', state: 1, v: '不通过'},
              {l: '预算金额字段为空', state: 1, v: '不通过'},
              {l: '您填写的内容存在错误，请查看提示信息后修改。', state: 3, v: '通过'}
            ]
          }, {
            label: '流程预测',
            info: [{
              num1: '0',
              num2: '3分',
              dateTime: '2024-08-08 09:17:05',
              status: 'finished',
              list: [{
                name: '凌焘',
                role: '审批',
                opinion: '同意',
                handler: '凌焘',
                handleTime: '2024-08-09 15:46:20',
                investTime: '3分'
              }]
            }]
          }, {
            label: '相关数据',
            info: [
              {
                text: `蓝旗机器人绿化改造项目预算-2024-04-25`,
                img: require('../../images/icon-doc.png')
              }, {
                text: `蓝旗机器人绿化改造项目预算-2024-04-25`,
                img: require('../../images/icon-doc.png')
              }, {
                text: `蓝旗机器人绿化改造项目预算-2024-04-25`,
                img: require('../../images/icon-doc.png')
              }, {
                text: `蓝旗机器人绿化改造项目预算-2024-04-25`,
                img: require('../../images/icon-doc.png')
              }
            ]
          }
        ]
      },
      fyzcDetailModalInfo: {
        formDetailTitle: '费用支出',
        formList: [
          {
            title: '',
            modalTitle: 'EDIT-FORM',
            list: [
              { l: '经办人', v: '朱冠', span: 6 },
              { l: '经办日期', v: '2024-07-30', type: 'datePicker', span: 6 },
              { l: '经办部门', v: 'XX部门', span: 6 },
              { l: '№', v: '', span: 6 },
              { l: '经办单位', v: 'XX发展集团有限公司', span: 24 }
            ]
          },
          {
            title: '基本信息',
            modalTitle: 'EDIT-FORM',
            list: [
              { l: '项目名称', v: '蓝旗机器人绿化改造费用支出', type: 'inputIconR', icon: { path:require('../../images/modal-icon1.png'), width: '14px', height: '16px'}, span: 12 },
              { l: '项目编号', v: 'XMBH202208028', span: 6 },
              { l: '项目部门', v: 'XMBM部门', span: 6 },
              { l: '费用类型', v: '住宿费', type: 'inputIconR', icon: { path:require('../../images/modal-icon1.png'), width: '14px', height: '16px'}, span: 6 },
              { l: '预算余额', v: '2,000.00', type: 'unitInput', unit: '元', span: 6 },
              { l: '支出金额', v: '', type: 'unitInput', unit: '元', span: 6 },
              { l: '支出日期', v: '', type: 'datePicker', span: 6 },
              { l: '支出事由', v: '', span: 24 }
            ]
          }
        ],
        tabList: [
          {
            label: "智能校验",
            value: "1",
            img: require('../../images/icon-tab-rt-2.png'),
            active: require('../../images/icon-tab-rt-active-2.png')
          }, {
            label: "流程预测",
            value: "4",
            img: require('../../images/icon-tab-rt-4.png'),
            active: require('../../images/icon-tab-rt-active-4.png')
          }, {
            label: "相关数据",
            value: "5",
            img: require('../../images/icon-tab-rt-5.png'),
            active: require('../../images/icon-tab-rt-active-5.png')
          }
        ],
        imgs: {
          contentImgTitle: "费用支出",
          img1: require('../../images/fyzc-form-modal-bg2.png'), // 查看流程
          img2: require('../../images/fyzc-form-modal-bg2-2.png'), // 查看流程泳道框图
          img3: [{
            num1: '0',
            num2: '',
            dateTime: '',
            status: 'finished',
            list: [{
              name: '凌焘',
              role: '审批',
              handler: '凌焘',
            }]
          }], // 流程预测
        },
        doc: {
          name: `费用支出-{项目名称}-{经办人}`,
          flow: `项目负责人(协同)、空节点、凌焘(审批)`
        },
        rTabData: [
          {
            label: '智能校验',
            info: [ // state: 1.不通过 2.警示 3.通过
              {l: '支出金额字段为空', state: 1, v: '不通过'},
              {l: '支出事由字段为空', state: 1, v: '不通过'},
              {l: '支出日期字段为空', state: 1, v: '不通过'},
              {l: '您填写的内容存在错误，请查看提示信息后修改。', state: 3, v: '通过'}
            ]
          }, {
            label: '流程预测',
            info: [{
              num1: '0',
              num2: '',
              dateTime: '',
              status: 'finished',
              list: [{
                name: '凌焘',
                role: '审批',
                handler: '凌焘',
              }]
            }]
          }, {
            label: '相关数据',
            info: [
              {
                text: `蓝旗机器人费用支出-2024-07-10`,
                img: require('../../images/icon-doc.png')
              }, {
                text: `蓝旗机器人费用支出-2024-07-10`,
                img: require('../../images/icon-doc.png')
              }, {
                text: `蓝旗机器人费用支出-2024-07-10`,
                img: require('../../images/icon-doc.png')
              }, {
                text: `蓝旗机器人费用支出-2024-07-10`,
                img: require('../../images/icon-doc.png')
              }
            ]
          }
        ]
      },
      ystzDetailModalInfo: {
        formDetailTitle: '预算调整',
        formList: [
          {
            title: '',
            modalTitle: 'EDIT-FORM',
            list: [
              { l: '申请人', v: '朱冠', span: 6 },
              { l: '申请日期', v: '2024-07-30', type: 'datePicker', span: 6 },
              { l: '申请部门', v: 'XX部门', span: 6 },
              { l: '№', v: '', span: 6 },
              { l: '申请单位', v: 'XX发展集团有限公司', span: 24 }
            ]
          },
          {
            title: '基本信息',
            modalTitle: 'EDIT-FORM',
            list: [
              { l: '项目名称', v: '蓝旗机器人绿化改造项目', type: 'inputIconR', icon: { path:require('../../images/modal-icon1.png'), width: '14px', height: '16px'}, span: 12 },
              { l: '项目编号', v: 'XMBH202208028', span: 6 },
              { l: '负责人', v: '朱冠', span: 6 },
              { l: '备注', v: '', span: 12 },
              { l: '相关附件', v: '', span: 12, type: 'inputIconR', icon: { path:require('../../images/modal-icon2.png'), width: '14px', height: '16px'}, span: 12 }
            ]
          },
          {
            title: '调整预算',
            modalTitle: 'EDIT-TABLE',
            list: [
              {
                btns: ['新建', '多选费用', '复制', '删除', '删除全部', '导入数据'],
                tableCol: [
                  { label: '调整类型', prop: 'tzlx', slot: 'select', type: 'select', option: [{l: '调增', v: '0'},{l: '调减', v: '1'},{l: '终止', v: '2'}], width: 120 },
                  { label: '费用类型', prop: 'fylx', slot: 'inputIconR', type: 'inputIconR', icon: { path:require('../../images/modal-icon3.png'), width: '16px', height: '16px'}, width: 150 },
                  { label: '预算金额（元）', prop: 'ysje' },
                  { label: '当前可用余额（元）', prop: 'dqkyye' },
                  { label: '调整金额（元）', prop: 'tzje', slot: 'input', type: 'input' },
                  { label: '调后可用余额（元）', prop: 'thkyye' },
                ],
                tableData: [
                  {
                    tzlx: null,
                    fylx: '住宿费',
                    ysje: '2,000.00',
                    dqkyye: '2,000.00',
                    tzje: '',
                    thkyye: '0.00'
                  }
                ],
                page: {
                  pageNum: 1, // 当前页
                  pageSize: 10, // 每页条数
                  total: 0 // 总条数
                }
              }
            ]
          }
        ],
        tabList: [
          {
            label: "智能校验",
            value: "1",
            img: require('../../images/icon-tab-rt-2.png'),
            active: require('../../images/icon-tab-rt-active-2.png')
          }, {
            label: "流程预测",
            value: "4",
            img: require('../../images/icon-tab-rt-4.png'),
            active: require('../../images/icon-tab-rt-active-4.png')
          }, {
            label: "相关数据",
            value: "5",
            img: require('../../images/icon-tab-rt-5.png'),
            active: require('../../images/icon-tab-rt-active-5.png')
          }
        ],
        imgs: {
          contentImgTitle: "预算调整",
          img1: require('../../images/ystz-form-modal-bg2.png'), // 查看流程
          img2: require('../../images/ystz-form-modal-bg2-2.png'), // 查看流程泳道框图
          img3: [{
            num1: '0',
            num2: '',
            dateTime: '',
            status: 'finished',
            list: [{
              name: '凌焘',
              role: '审批',
              handler: '凌焘',
            }]
          }], // 流程预测
        },
        doc: {
          name: `预算调整-{项目名称}-{经办日期}`,
          flow: `凌焘(审批)`
        },
        rTabData: [
          {
            label: '智能校验',
            info: [ // state: 1.不通过 2.警示 3.通过
              {l: '调整金额字段为空', state: 1, v: '不通过'},
              {l: '调整类型字段为空', state: 1, v: '不通过'},
              {l: '您填写的内容存在错误，请查看提示信息后修改。', state: 3, v: '通过'}
            ]
          }, {
            label: '流程预测',
            info: [{
              num1: '0',
              num2: '',
              dateTime: '',
              status: 'finished',
              list: [{
                name: '凌焘',
                role: '审批',
                handler: '凌焘',
              }]
            }]
          }, {
            label: '相关数据',
            info: [
              {
                text: `蓝旗机器人绿化改造项目预算调整-2024-07-30`,
                img: require('../../images/icon-doc.png')
              }
            ]
          }
        ]
      }
    };
  },
  watch: {
    'cardData.length': {
      handler(n, o) {}, 
      deep: true
    },
    'cardData2.length': {
      handler(n, o) {}, 
      deep: true
    },
    tableData: {
      handler(n, o) {
        setTimeout(() => {
          document.querySelector('.border-r').style.height = `${document.querySelector('.cust-act-table').offsetHeight}px`;
        }, 10)
      },
      deep: true
    },
    contentIdx(n) {},
    modalType(n){},
    cardIdx(n){},
  },
  mounted() {
    this.$nextTick(() => {
      this.tableData = tableData7[0];
      setTimeout(() => {
        document.querySelector('.border-r').style.height = `${document.querySelector('.cust-act-table').offsetHeight}px`;
      }, 1500)
      this.customColumns = customColumns7;
    })
    setTimeout(() => {
      if(this.cardData && this.cardData.length){
        this.cardTablePage.total = this.cardData.length;
        this.cardTitle1 = `在建项目成本投入-负责项目 (${this.cardTablePage.total})条`;
      } else {
        this.cardTablePage.total = 0;
        this.cardTitle1 = `在建项目成本投入-负责项目`;
      }
    }, 500)
  },
  methods: {
    /**
     * @author Wrl
     * 点击列表查看按钮
     */
    showNextLevelModal(e) {
      this.showModal(e);
    },
    /**
     * @author Wrl
     * 新增筛选条件
     */
    handleAdd(e) {
      if(this.shortType == 0) {
        this.index1++;
        this.shortForm.item1.push({
          sel1: '',
          sel2: '',
          ipt1: '',
        });
      } else if(this.shortType == 1) {
        this.index2++;
        this.shortForm.item2.push({
          sel1: '',
          sel2: '',
          sel3: '',
          sel4: '',
          sel5: '',
          ipt1: '',
        });
      }
    },
    /**
     * @author Wrl
     * 删除筛选条件
     */
    handleRemove(e) {
      if(this.shortType == 0) {
        if(this.index1 != 0) {
          this.shortForm.item1.splice(this.index1, 1);
          this.index1--
        }
      } else if(this.shortType == 1) {
        if(this.index2 != 0) {
          this.shortForm.item2.splice(this.index2, 1);
          this.index2--
        }
      }
    },
    /**
     * @author Wrl
     * 设置筛选条件 - 保存
     */
    saveShortcut() {
      this.$message.success('保存成功！');
      this.shortcutState = false;
    },
    /**
     * @author Wrl
     * 设置筛选条件弹窗
     */
    shortcutFilter(e) {
      this.shortcutState = e;
      if(e == false) {
        this.shortType = 0;
        this.shortForm = {
          item1: [
            {
              sel1: '',
              sel2: '',
              ipt1: '',
            }
          ],
          item2: [
            {
              sel1: '',
              sel2: '',
              sel3: '',
              sel4: '',
              sel5: '',
              ipt1: '',
            }
          ]
        }
      }
    },
    /**
     * @author Wrl
     * 点击卡片弹窗列表行 - 二级弹窗
     */
    boxClick(obj) {
      this.cardData2 = [];
      let format = /\d{1,3}(?=(\d{3})+$)/g;
      this.$nextTick(() => {
        this.cardTitle2 = `${obj.a}_${obj.b}_${obj.c}(求和):${(obj.d).replace(format, '$&,')+'.00'}`;
        let info = {
          type: obj.a, // 费用类型
          project: obj.b, // 项目名称
          cType: obj.c, // 点击列标题
          num1: obj.d.replace(format, '$&,')+'.00', // 预算金额
          num2: obj.e.replace(format, '$&,')+'.00', // 使用金额
        }
        this.cardData2.push(info);
        this.showModal('card2')
      })
    },
    /**
     * @author Wrl
     * 重置查询条件
     */
    resetForm() {
      this.formData = {};
    },
    /**
     * @author Wrl
     * 切换查询条件
     */
    changeSearch() {
      this.showSearch = !this.showSearch
    },
    /**
     * @author Wrl
     * 点击树形控件
     */
    handleNodeClick(data) {
      this.contentIdx = data.id;
      this.customColumns = customColumns7;
      this.tableData = tableData7[this.contentIdx];
    },
    /**
     * @author Wrl
     * 点击列表 - 操作
     */
    getDetail(row) {
      if(typeof row == 'object' && row.actIdx) {
        this.rowIdx = row.actIdx;
      }
      if(this.rowIdx == '0'){
        this.showModal('fyzcModal');
      } else if(this.rowIdx == '1') {
        this.showModal('ystzModal');
      }
    },
    /**
     * @author Wrl
     * 显示弹窗
     */
    showModal(type) {
      if(type== 'edit' || type == 'table') {
        this.modalType = type;
      }
      if(type == 'xmysModal') { // 项目预算
        this.xmysModal = true;
      } else if(type == 'fyzcModal') { // 费用支出
        this.tableModalState = false;
        this.fyzcModal = true;
      } else if(type == 'ystzModal') { // 预算调整
        this.tableModalState = false;
        this.ystzModal = true;
      } else if(type == 'card1') {
        this.cardModalState1 = true;
      } else if(type == 'card2') {
        this.cardModalState2 = true;
      } else if(type == 'card3') {
        this.tableModalState = true;
      } else if(type == 'edit') { // 成本登记
        this.tableModalState = true;
      } else if(type == 'table') {
        this.tableModalState = true;
      } else if(type == 'nextLevel') {
        this.cardTitle2 = '穿透显示详情';
        this.cardModalState2 = true;
      }
    },
    /**
     * @author Wrl
     * 关闭弹窗
     */
    closeModal(type) {
      if(type == 'xmysModal') { // 项目预算
        this.xmysModal = false;
      } else if(type == 'fyzcModal') { // 费用支出
        this.fyzcModal = false;
      } else if(type == 'ystzModal') { // 预算调整
        this.ystzModal = false;
      } else if(type == 'card1') {
        this.cardModalState1 = false;
      } else if(type == 'card2') {
        this.cardModalState2 = false;
      } else if(type == 'card3') {
        this.tableModalState = false;
      } else if(type == 'edit') { // 成本登记
        this.tableModalState = false;
      } else if(type == 'table') {
        this.tableModalState = false;
      } else if(type == 'nextLevel') {
        this.cardModalState2 = false;
      }
    },
		/**
		 * @author Wrl
		 * 获取分页信息
		 */
		changePage(page) {
			this.page.pageNum = page.pageNum; // 当前页
			this.page.pageSize = page.pageSize; // 每页条数
			this.page.total = page.total; // 总数
		},
    /**
     * @author Wrl
     * 获取卡片列表分页信息
     */
    changeCardTablePage(page) {
			this.cardTablePage.pageNum = page.pageNum; // 当前页
			this.cardTablePage.pageSize = page.pageSize; // 每页条数
			this.cardTablePage.total = page.total; // 总数
		},
    /**
     * @author Wrl
     * 获取卡片二级列表分页信息
     */
    changeCustCardDetailTablePage(page) {
			this.custCardDetailPage.pageNum = page.pageNum; // 当前页
			this.custCardDetailPage.pageSize = page.pageSize; // 每页条数
			this.custCardDetailPage.total = page.total; // 总数
		},
  }
};
</script>

<style lang="scss" scoped>
  .cost-control-doing {
    .card-group,
    .table-top-btns {
      margin-bottom: 16px;
    }
    .card-modal {
      overflow: hidden;
      max-height: 750px;
      .el-dialog__body {
        padding: 10px 20px;
      }
      .plan-change-btns {
        position: absolute;
        top: 10px;
        right: 50px;
        width: 900px;
        display: inline-flex;
        justify-content: flex-end;
        align-items: center;
        .el-icon-question {
          color: #11A983;
          margin-left: 10px;
          cursor: pointer;
        }
      }
    }
    .tree-search {
      width: 200px;
      ::v-deep .el-input__inner {
        border-radius: 20px;
      }
    }
    .cust-tree {
      margin-top: 16px;
    }
    .bottom-card {
      min-height: 100px;
    }
    ::v-deep {
      .search {
        .el-form-item {
          width: 100%;
        }
        .el-form-item__content {
          width: calc(100% - 90px);
        }
      }
      .btn-modal {
        .el-dialog__header {
          padding: 20px;
        }
        .el-dialog__body {
          padding: 5px;
          background: #eeeeee;
        }
      }
      .edit-modal .el-dialog__header {
        padding: 20px 20px 0;
      }
      .cust-modal .cust-modal-bgi {
        margin-top: 20px;
      }
      .el-dialog__header{
        padding: 0;
      }
      .el-dialog__body {
        padding: 10px 20px;
      }
      .el-dialog__headerbtn {
        z-index: 100;
      }
      .card-modal {
        .el-dialog__header {
          padding: 20px;
        }
      }
      .help-modal {
        .el-dialog__header {
          padding: 20px;
        }
        .el-dialog__body {
          padding: 0 20px;
          div {
            height: 75vh;
            overflow-y: scroll;
            padding-bottom: 20px;
            box-sizing: content-box;
            ul {
              padding: 0;
              li {
                list-style: none;
                h4 {
                  margin: 20px 0 5px;
                }
                h5 {
                  color:#333333;
                  font-weight: bold;
                  font-family: Arial, "微软雅黑", "Helvetica Neue", "Microsoft Yahei", 宋体, Helvetica, STheiti, Tahoma, sans-serif, serif;
                  font-size: 14px;
                  margin: 5px auto;
                  text-indent: 1.5em;
                }
                p {
                  margin-top: 0;
                  text-indent: 2em;
                }
              }
            }
            &::-webkit-scrollbar {
              width: 0;
            }
          }
        }
      }
      .table-modal {
        .el-dialog__header {
          padding: 10px 20px;
        }
      }
      .shortcut-modal {
        .el-dialog__header {
          padding: 10px 20px;
        }
        .el-dialog__body {
          padding: 0 20px;
        }
        .shortcut-modal-title {
          display: inline-flex;
          justify-content: space-between;
          align-items: center;
          width: 95%;
        }
        .shortcut-modal-body {
          .select-type {
            display: inline-flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 15px;
            .el-radio-group {
              margin-left: 10px;
            }
          }
          .cust-btn {
            padding: 2px 3px;
            font-size: 10px;
          }
        }
        .shortcut-modal-footer {
          display: inline-flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
        }
      }
    }
    .border-r {
      min-width: 220px;
      border-right: 1px solid #cccccc;
    }
  }
</style>